<template>
    <div>
        <h1 style="text-align: center;">商品添加</h1>

        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-upload
                    class="upload-demo"
                    action="/admin/api/uploads"
                    :show-file-list="false"
                    accept=".jpg,.png,.jpeg,.webp,.gif"
                    name="dishimg"
                    :on-success="successUpload"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <img v-show="form.imgpath === ''" width="100" height=100 src="../../assets/noimg.gif" alt="">
                <img v-show="form.imgpath != ''" width="100" height=100 :src="'/admin/' + form.imgpath" alt="">
            </el-form-item>
            <el-form-item label="商品规格">
                <div class="specs" v-for="(spec, index) in specs" :key="spec.id">
                    <el-input v-model="spec.value"></el-input>
                    <el-button @click="addspec" v-if="index === specs.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button @click="reducespec" v-if="index === specs.length - 1 && specs.length > 2" type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="商品类别">
                <div class="specs" v-for="(kind, index) in kinds" :key="kind.id">
                    <el-input v-model="kind.value"></el-input>
                    <el-button @click="addkind" v-if="index === kinds.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button @click="reducekind" v-if="index === kinds.length - 1 && kinds.length > 2" type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="上否上架">
                <el-switch
                v-model="form.enable"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="商品分类">
                <el-select v-model="form.catname" placeholder="请选择商品分类">
                    <!-- <el-option value="0">请选择分类</el-option> -->
                    <el-option
                        v-for="item in cats"
                        :key="item._id"
                        :label="item.catname"
                        :value="item.catname">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品详情">
                <Editor
                    v-model="form.detail"
                    :init="{
                        plugins: 'lists link image table code help wordcount',
                        height: 500,
                        width: 300
                    }"
                />
            </el-form-item>
            <el-form-item>
                <el-button @click="onSubmit" type="primary">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {CatList} from '@/request'
import Editor from '@tinymce/tinymce-vue'

export default {
    components: {Editor},
    data () {
        return {
            cats: [],
            form: {
                name: '',
                price: '',
                imgpath: '',
                enable: false,
                detail: ''
            },
            specs: [
                {
                    id: 1,
                    value: ''
                },
                {
                    id: 2,
                    value: ''
                }
            ],
            kinds: [
                {
                    id: 1,
                    value: ''
                },
                {
                    id: 2,
                    value: ''
                }
            ]
        }
    },
    methods: {
        onSubmit(){
            console.log(this.form.detail);
        },
        addspec() {
            this.specs.push({
                id: this.specs.length + 1,
                value: ''
            })
        },
        reducespec() {
            this.specs.pop()
        },
        addkind() {
            this.kinds.push({
                id: this.kinds.length + 1,
                value: ''
            })
        },
        reducekind() {
            this.kinds.pop()
        },
        successUpload(response, file, fileList) {
            // console.log(response, file, fileList);
            this.form.imgpath = response.data.filepath

        },
        async getCatList() {
            let data = await CatList()
            this.cats = data.data.catlist
        }
    },
    created() {
        this.getCatList()
    }
}
</script>

<style lang="scss" scoped>
    .specs{
        display: flex;
        .el-button.is-circle{
            padding: 0;
        }
        .el-button{
            font-size: 35px;
        }
        .el-input{
            width: 90%;
        }
    }
</style>
